import Layout from 'lib/components/layout'
import { Note, Code, Spacer, Link } from 'components'

export const meta = {
  title: 'Themes',
  group: 'Customization',
  index: 25,
}

## Themes

**Geist UI** now supports a variety of themes, and it is very easy to create or inherit modifications, no third-party styles or configs.

As a basic option, there are two themes available, `light` and `dark`.

<Spacer h={2} />

### Switch themes

<Note>
  Before using any Components, you must add <Code>GeistProvider</Code> to the root node.
</Note>
<Spacer h={0.5} />
<Note type="success">
  <Code>CssBaseline</Code> provides basic CSS support, which is similar to{' '}
  <Code>normalize</Code>.
</Note>
<Spacer h={1} />

**Now you can change the theme as follows:**

1. Make sure `GeistProvider` and `CssBaseline` are already on the root component.

2. Update the value of `themeType`, and the theme of all components will follow automatically.

```jsx
import { CssBaseline, GeistProvider } from '@geist-ui/react'

const App = () => {
  const [themeType, setThemeType] = useState('light')
  const switchThemes = () => {
    setThemeType(last => (last === 'dark' ? 'light' : 'dark'))
  }
  return (
    <GeistProvider themeType={themeType}>
      <CssBaseline />
      <YourComponent onClick={switchThemes} />
    </GeistProvider>
  )
}
```

<Spacer h={3} />

### Customizing theme

Customizing a theme is very simple in Geist UI, you just need to provide a new theme `Object`,
and all the components will change automatically.
Here is <Link target="_blank" color href="https://github.com/geist-org/react/tree/master/examples/custom-themes">a complete sample project</Link> for reference.

Of course, if a _component_ doesn't use your customized variables, it doesn't make any additional **changes** or **rendering**.

<Spacer h={1} />
<Note type="warning">
  The more changes you customize, the more Components will <b>Re-Render</b>.
</Note>

```jsx
import { CssBaseline, GeistProvider, Themes } from '@geist-ui/react'

const myTheme1 = Themes.createFromLight({
  type: 'coolTheme',
  palette: {
    success: '#000',
  },
})

const App = () => (
  <GeistProvider themes={[myTheme1]} themeType="coolTheme">
    <CssBaseline />
    <YourAppComponent onClick={switchThemes} />
  </GeistProvider>
)
```

Function `Themes.createFromLight` allows you to fork a new theme based on Light Theme,
Of course, you can also create a new theme based on the dark style: `Themes.createFromDark`,
Or create a theme based on your own theme:

```jsx
const myBaseTheme = { ... }
const myTheme2 = Themes.create(myBaseTheme, {
  type: 'myTheme2',
  palette: {
    success: '#000',
  },
})
```

<Spacer h={3} />

### View all types of Theme definitions

If you are using TypeScript, you can import various preset types:

```ts
import {
  GeistUIThemes,
  GeistUIThemesFont,
  GeistUIThemesPalette,
  GeistUIThemesExpressiveness,
  GeistUIThemesLayout,
} from '@geist-ui/react'

// usage:
const myStyles: GeistUIThemes = {
  /* ... */
}
const myPalette: Partial<GeistUIThemesPalette> = {
  /* ... */
}
```

If you don't use TypeScript, to learn more about preset types, see <Link color target="_blank" href="https://github.com/geist-org/react/blob/master/components/themes/presets/index.ts">here</Link>.

<Spacer h={3} />

### Customizing components

#### Overriding styles with `className`

You can override the style by defining a `className` on the component.

```jsx
import { Button, Row } from '@geist-ui/react'

const MyPage = () => (
  <Row>
    <Button className="page-button">Click me!</Button>
  </Row>
)

// in css file:
.page-button {
  padding: 0;
}
```

<Spacer h={2} />

#### Overriding styles with `inline-style`

Defining an `inline-style` will also correctly override the component.

```jsx
const MyPage = () => (
  <Row>
    <Button style={{ margin: '20px' }}>Click me!</Button>
  </Row>
)
```

<Spacer h={2} />

#### Build your own Components with `theme`

Sometimes you want to create new components, but you want to be consistent with the current theme. Now you can try using **theme variables** in your components

```jsx
import { useTheme } from '@geist-ui/react'

const MyComponent = () => {
  const theme = useTheme()
  return (
    <div style={{ color: theme.palette.success }}>
      <span>hello world!</span>
    </div>
  )
}
```

<Spacer h={2} />

#### Themes APIs

`Themes` contains some static methods that are useful when working with custom themes:

- `Themes.create` - create a new theme object.
- `Themes.createFromDark` - create a new theme object based on Dark Theme.
- `Themes.createFromLight` - create a new theme object based on Light Theme.
- `Themes.isPresetTheme` - Check if a theme is the base of Geist UI.
- `Themes.isAvailableThemeType` - Check if the name of the theme is available.
- `Themes.hasUserCustomTheme` - Check if a list of themes has a custom.
- `Themes.getPresets` - Get a default list of themes.
- `Themes.getPresetStaticTheme` - Get the theme loaded by Geist UI default.

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
